<template>
  <div class="patient-reported-analysis">
    <el-table
      :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
      :data="tableList"
      style="width: calc(100% - 10px);text-align: center"
      size="mini"
    >
      <el-table-column type="index" label="#" align="center" />
      <el-table-column label="/" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.visitName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="未录入" align="center">
        <template slot-scope="scope">
          <span :style="{ color: handleColor(scope.row.noEnter) }">
            {{ scope.row.noEnter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="未提交" align="center">
        <template slot-scope="scope">
          <span :style="{ color: handleColor(scope.row.noSubmit) }">{{ scope.row.noSubmit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="未签字" align="center">
        <template slot-scope="scope">
          <span :style="{ color: handleColor(scope.row.noSign) }">{{ scope.row.noSign }}</span>
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in tableList[0]&&tableList[0].examineExcerpts" :key="index + '2'" align="center">
        <template slot="header">
          {{ item.title }}
        </template>
        <template slot-scope="scope">
          <span
            :style="{
              color: handleColor(scope.row.examineExcerpts[index].datail),
            }"
            >{{ scope.row.examineExcerpts[index].datail }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="质疑" align="center">
        <el-table-column prop="d8" label="未回复" align="center">
          <template slot-scope="scope">
            <span :style="{ color: handleColor(scope.row.question.noResponse) }">{{
              scope.row.question.noResponse
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="d9" label="已回复" align="center">
          <template slot-scope="scope">
            <span
              :style="{
                color: handleColor(scope.row.question.replied, '已回复'),
              }"
              >{{ scope.row.question.replied }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="d10" label="未冻结" align="center">
        <template slot-scope="scope">
          <span :style="{ color: handleColor(scope.row.noFroze) }">{{ scope.row.noFroze }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { tableData } from './rightData.js'

export default {
  data() {
    return {
      tableList: [],
      tableData,
    }
  },

  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo,
    }),
    ...mapGetters({
      findRole: 'treatment/findRole',
    }),
  },
  watch: {
    subjectInfo: {
      handler(val) {
        if (val && Reflect.has(val, 'common')) {
          setTimeout(this.findSubjectExcerpt, 100)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleColor(val, type) {
      if (type == '已回复') {
        const arr = val.split('/')
        return arr[0] == arr[1] ? '' : '#f56c6c'
      } else {
        return val && val.indexOf('/') >= 0 && parseInt(val.split('/')[0]) > 0 ? '#f56c6c' : ''
      }
    },
    // 获取表格数据
    findSubjectExcerpt() {
      this.tableList = this.tableData
    },
  },
}
</script>

<style lang="scss" scoped>
.patient-reported-analysis {
  padding: 0.5rem 1rem 0 1rem;

  /deep/ {
    .el-table {
      @media screen and (min-width: 2199px) and (max-width: 3000px) {
        max-height: 1020px;
      }

      @media screen and (min-width: 1900px) and (max-width: 2200px) {
        max-height: 880px;
      }

      @media screen and (min-width: 1600px) and (max-width: 1899px) {
        max-height: 720px;
      }

      @media screen and (min-width: 1300px) and (max-width: 1599px) {
        max-height: 590px;
      }

      @media screen and (min-width: 768px) and (max-width: 1299px) {
        max-height: 840px;
      }

      overflow: auto;
    }
  }
}
</style>
